<script setup lang="ts">
import { reactive, Ref, ref } from "vue";

let running: Ref<boolean> = ref(false);
let sources: object[] = reactive([]);
window.api.getMedia().then((res: () => IterableIterator<object>) => {
  sources.values = res;
});
function getMedia(): void {
  window.api.getMedia().then((res) => {
    sources.values = res;
  });
}
async function showMedia(str: string): Promise<void> {
  await window.api.getStream(str);
}
async function stopMedia(): Promise<void> {
  await window.api.stopMedia();
}
function start(): void {
  running.value = true;
  window.api.start();
}
function stop(): void {
  running.value = false;
  window.api.stop();
}
function closeWin(): void {
  window.api.closeWin();
}
function minSize(): void {
  window.api.minSize();
}

window.api.setStop(stop);

window.api.setStart(start);
</script>

<template>
  <div class="box">
    <div class="controls">
      <div v-if="!running" @click="start()">
        <img src="../../assets/start.svg" alt="" />
        <p>开始录屏</p>
        <p>(快捷键f6)</p>
      </div>
      <div v-else @click="stop()">
        <img src="../../assets/stop.svg" alt="" />
        <p>停止录屏</p>
        <p>(快捷键f7)</p>
      </div>
      <div @click="getMedia()">
        <img src="../../assets/refresh.svg" alt="" />
        <p>刷新</p>
      </div>
      <div>
        <img src="../../assets/min.svg" @click="minSize()" alt="" />
        <p>最小化</p>
      </div>
      <div>
        <img src="../../assets/close.svg" @click="closeWin()" alt="" />
        <p>关闭</p>
      </div>
    </div>
    <div>点击以下参数即可预览</div>
    <div
      class="select"
      v-for="item in sources.values"
      :key="item.id"
      @click="showMedia(item.id)"
    >
      {{ item.name }}
    </div>
    <video src="" id="video1" controls></video>
  </div>
</template>
<style lang="less">
body::-webkit-scrollbar {
  width: 0;
}
header {
  height: 20px;
  background-color: aliceblue;
}
video {
  width: 400px;
  height: 300px;
}
.select {
  // width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: white;
}

.controls {
  display: flex;
  padding-top: 20px;
  justify-content: space-evenly;

  -webkit-app-region: drag;
  div {
    -webkit-app-region: no-drag;
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    img {
      height: 40px;
      width: 50px;
    }
    p {
      font-size: 12px;
    }
  }
}
</style>
